<template>
  <div class="container">
    <div class="sidebar">
      <ul>
        <li>
          <div class="group-title">监控</div>
          <div
            class="main-menu"
            @click="toggleMenu('monitor')"
            :style="{ fontWeight: 'bold' }"
          >
            <span class="arrow" :class="{ expanded: openMenus.monitor }">▶</span>告警
          </div>
          <ul v-show="openMenus.monitor" class="submenu">
            <li
              v-for="item in menuList"
              :key="item.key"
              :class="{ active: currentMenu === item.key }"
              @click="selectMenu(item.key)"
            >
              {{ item.label }}
            </li>
            <li
              :class="{ active: currentMenu === 'event' }"
              @click="selectMenu('event')"
            >
              当前事件
            </li>
          </ul>
        </li>
        <li>
          <div class="group-title">性能</div>
          <div
            class="main-menu"
            :class="{ active: currentMenu === 'performance' }"
            @click="selectMenu('performance')"
          >
            性能
          </div>
        </li>
      </ul>
    </div>
    <div class="content">
      <div v-if="currentMenu === 'alarmList'">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" style="margin-bottom: 20px;">
          <el-breadcrumb-item>监控</el-breadcrumb-item>
          <el-breadcrumb-item>告警</el-breadcrumb-item>
          <el-breadcrumb-item>告警列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 标签页 -->
        <el-tabs v-model="activeTab" style="margin-bottom: 20px;">
          <el-tab-pane label="实时告警" name="realtime"></el-tab-pane>
          <el-tab-pane label="历史告警" name="historical"></el-tab-pane>
        </el-tabs>

        <!-- 筛选区域 -->
        <div class="filter-bar" style="margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;">
          <el-select v-model="filters.level" placeholder="告警级别" size="small" style="width: 120px;">
            <el-option label="全部级别" value=""></el-option>
            <el-option label="紧急" value="紧急"></el-option>
            <el-option label="重要" value="重要"></el-option>
            <el-option label="提示" value="提示"></el-option>
          </el-select>
          <el-select v-model="filters.type" placeholder="所有类型" size="small" style="width: 120px;">
            <el-option label="全部类型" value=""></el-option>
            {/* <!-- 根据实际情况添加类型选项 --> */}
          </el-select>
          <el-select v-model="filters.status" placeholder="未清除" size="small" style="width: 100px;">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="未清除" value="unclear"></el-option>
            <el-option label="已清除" value="clear"></el-option>
          </el-select>
          <el-input v-model="filters.id" placeholder="全部ID" size="small" style="width: 150px;" clearable />
          <el-input v-model="filters.name" placeholder="全部名称" size="small" style="width: 150px;" clearable />
          
          <el-dropdown size="small">
            <el-button type="primary" plain size="small">
              高级搜索 <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>高级选项1</el-dropdown-item>
                <el-dropdown-item>高级选项2</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <div style="margin-left: auto; display: flex; gap: 10px;">
            <el-button :icon="Refresh" circle size="small" @click="refreshData" />
            <el-button :icon="Setting" circle size="small" />
          </div>
        </div>

        <!-- 告警列表表格 -->
        <el-table :data="alarmListData" style="width: 100%" border size="small">
          <el-table-column type="expand">
            <template #default="props">
              <div style="padding: 10px;">
                <p>告警详情: {{ props.row.name }}</p>
                <p>附加信息: 这里可以展示更多关于告警的详细信息。</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="告警ID" min-width="100" show-overflow-tooltip />
          <el-table-column prop="level" label="告警级别" width="100"> 
            <!-- {/* 调整宽度 */} -->
            <template #default="scope">
              <span v-if="scope.row.level === '紧急'" style="color: #F56C6C;">
                <el-icon><WarningFilled /></el-icon> {{ scope.row.level }}
              </span>
              <span v-else-if="scope.row.level === '重要'" style="color: #E6A23C;">
                <el-icon><WarnTriangleFilled /></el-icon> {{ scope.row.level }}
              </span>
              <span v-else style="color: #909399;">
                {{ scope.row.level }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="告警名称" min-width="150" show-overflow-tooltip /> {/* 调整min-width */}
          <el-table-column prop="object" label="告警对象" min-width="120" show-overflow-tooltip /> {/* 调整min-width */}
          <el-table-column prop="objectType" label="对象类型" width="90" /> {/* 调整宽度 */}
          <el-table-column prop="generateTime" label="产生时间" width="150" /> {/* 调整宽度 */}
          <el-table-column prop="clearTime" label="清除时间" width="150"> 
            <!-- {/* 调整宽度 */} -->
            <template #default="scope">
              {{ scope.row.clearTime || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="clearType" label="清除类型" width="90">
             <!-- {/* 调整宽度 */} -->
            <template #default="scope">
              {{ scope.row.clearType || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180"> 
             <!-- {/* 调整宽度 */} -->
            <template #default="scope">
              <el-button link type="primary" size="small">清除</el-button>
              <el-button link type="primary" size="small">屏蔽</el-button>
              <el-dropdown size="small" style="margin-left: 10px;">
                <el-button link type="primary" size="small">
                  更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>操作1</el-dropdown-item>
                    <el-dropdown-item>操作2</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          layout="prev, pager, next, sizes, total"
          :total="alarmListData.length"
          :page-sizes="[5, 10, 20]"
          :page-size="5"
          style="margin-top: 15px; justify-content: flex-start;"
        />
      </div>
      <div v-else-if="currentMenu === 'alarmValue'">
        <!-- 告警阈值面包屑导航 -->
        <el-breadcrumb separator="/" style="margin-bottom: 20px;">
          <el-breadcrumb-item>监控</el-breadcrumb-item>
          <el-breadcrumb-item>告警</el-breadcrumb-item>
          <el-breadcrumb-item>告警阈值</el-breadcrumb-item>
        </el-breadcrumb>

        <el-tabs v-model="thresholdActiveTab" style="margin-bottom: 15px;">
          <el-tab-pane label="默认阈值规则" name="default"></el-tab-pane>
          <el-tab-pane label="自定义阈值规则" name="custom"></el-tab-pane>
        </el-tabs>

        <!-- 默认阈值规则内容 -->
        <div v-if="thresholdActiveTab === 'default'">
          <p style="margin-bottom: 20px; color: #606266; font-size: 13px;">
            调整各项告警的上报级别和阈值，当指标参数达到设定阈值时，系统才会上报该级别告警。
          </p>
          <div v-for="group in alarmThresholdData" :key="group.groupName" class="threshold-group">
            <div class="group-header" @click="toggleThresholdGroup(group)">
              <el-icon style="margin-right: 8px;">
                <component :is="group.isExpanded ? 'ArrowDownBold' : 'ArrowRightBold'" />
              </el-icon>
              {{ group.groupName }}
            </div>
            <el-table v-show="group.isExpanded" :data="group.items" border size="small" style="width: 100%; margin-bottom: 20px;">
              <el-table-column prop="metric" label="指标" min-width="180" show-overflow-tooltip />
              <el-table-column prop="alarmId" label="告警ID" width="120" />
              <el-table-column prop="critical" label="紧急告警" width="100" />
              <el-table-column prop="major" label="次要告警" width="100" />
              <el-table-column prop="minor" label="提示告警" width="100" />
              <el-table-column prop="delay" label="清除延迟" width="100" />
              <el-table-column label="操作" width="220">
                <template #default>
                  <el-button link type="primary" size="small">修改</el-button>
                  <el-button link type="primary" size="small" style="margin-left: 5px;">屏蔽所有对象告警</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 自定义阈值规则内容 -->
        <div v-if="thresholdActiveTab === 'custom'">
          <div style="margin-bottom: 10px;">
            <el-button type="primary" @click="addRuleDialogVisible = true">添加</el-button>
          </div>
          <!-- 下面是自定义规则表格 -->
          <el-table :data="customRulesData" border size="small" @selection-change="handleCustomRuleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="名称" min-width="150" show-overflow-tooltip />
            <el-table-column prop="metricItem" label="指标项" min-width="180" show-overflow-tooltip />
            <el-table-column prop="objectType" label="对象类型" width="120" />
            <el-table-column prop="threshold" label="阈值" width="100" />
            <el-table-column prop="level" label="告警级别" width="100" />
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="editCustomRule(scope.row)">修改</el-button>
                <el-button link type="danger" size="small" @click="deleteCustomRule(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="customRulesData.length > 0"
            small
            background
            layout="prev, pager, next, sizes, total"
            :total="customRulesTotal"
            :page-sizes="[10, 20, 50]"
            :page-size="customRuleFilters.pageSize"
            :current-page="customRuleFilters.pageNum"
            @size-change="handleCustomRuleSizeChange"
            @current-change="handleCustomRulePageChange"
            style="margin-top: 15px; justify-content: flex-start;"
          />
        </div>
      </div>
      <div v-else-if="currentMenu === 'alarmBoard'">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" style="margin-bottom: 20px;">
          <el-breadcrumb-item>监控</el-breadcrumb-item>
          <el-breadcrumb-item>告警</el-breadcrumb-item>
          <el-breadcrumb-item>告警屏蔽</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 标签页 -->
        <el-tabs v-model="activeTab" style="margin-bottom: 20px;">
          <el-tab-pane label="实时告警" name="realtime"></el-tab-pane>
          <el-tab-pane label="历史告警" name="historical"></el-tab-pane>
        </el-tabs>

        <!-- 筛选区域 -->
        <div class="filter-bar" style="margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;">
          <el-select v-model="filters.level" placeholder="告警级别" size="small" style="width: 120px;">
            <el-option label="全部级别" value=""></el-option>
            <el-option label="紧急" value="紧急"></el-option>
            <el-option label="重要" value="重要"></el-option>
            <el-option label="提示" value="提示"></el-option>
          </el-select>
          <el-select v-model="filters.type" placeholder="所有类型" size="small" style="width: 120px;">
            <el-option label="全部类型" value=""></el-option>
            {/* <!-- 根据实际情况添加类型选项 --> */}
          </el-select>
          <el-select v-model="filters.status" placeholder="未清除" size="small" style="width: 100px;">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="未清除" value="unclear"></el-option>
            <el-option label="已清除" value="clear"></el-option>
          </el-select>
          <el-input v-model="filters.id" placeholder="全部ID" size="small" style="width: 150px;" clearable />
          <el-input v-model="filters.name" placeholder="全部名称" size="small" style="width: 150px;" clearable />
          
          <el-dropdown size="small">
            <el-button type="primary" plain size="small">
              高级搜索 <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>高级选项1</el-dropdown-item>
                <el-dropdown-item>高级选项2</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <div style="margin-left: auto; display: flex; gap: 10px;">
            <el-button :icon="Refresh" circle size="small" @click="refreshData" />
            <el-button :icon="Setting" circle size="small" />
          </div>
        </div>

        <!-- 告警列表表格 -->
        <el-table :data="alarmListData" style="width: 100%" border size="small">
          <el-table-column type="expand">
            <template #default="props">
              <div style="padding: 10px;">
                <p>告警详情: {{ props.row.name }}</p>
                <p>附加信息: 这里可以展示更多关于告警的详细信息。</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="告警ID" min-width="100" show-overflow-tooltip />
          <el-table-column prop="level" label="告警级别" width="100"> 
            <!-- {/* 调整宽度 */} -->
            <template #default="scope">
              <span v-if="scope.row.level === '紧急'" style="color: #F56C6C;">
                <el-icon><WarningFilled /></el-icon> {{ scope.row.level }}
              </span>
              <span v-else-if="scope.row.level === '重要'" style="color: #E6A23C;">
                <el-icon><WarnTriangleFilled /></el-icon> {{ scope.row.level }}
              </span>
              <span v-else style="color: #909399;">
                {{ scope.row.level }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="告警名称" min-width="150" show-overflow-tooltip /> {/* 调整min-width */}
          <el-table-column prop="object" label="告警对象" min-width="120" show-overflow-tooltip /> {/* 调整min-width */}
          <el-table-column prop="objectType" label="对象类型" width="90" /> {/* 调整宽度 */}
          <el-table-column prop="generateTime" label="产生时间" width="150" /> {/* 调整宽度 */}
          <el-table-column prop="clearTime" label="清除时间" width="150"> 
            <!-- {/* 调整宽度 */} -->
            <template #default="scope">
              {{ scope.row.clearTime || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="clearType" label="清除类型" width="90">
             <!-- {/* 调整宽度 */} -->
            <template #default="scope">
              {{ scope.row.clearType || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180"> 
             <!-- {/* 调整宽度 */} -->
            <template #default="scope">
              <el-button link type="primary" size="small">清除</el-button>
              <el-button link type="primary" size="small">屏蔽</el-button>
              <el-dropdown size="small" style="margin-left: 10px;">
                <el-button link type="primary" size="small">
                  更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>操作1</el-dropdown-item>
                    <el-dropdown-item>操作2</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          layout="prev, pager, next, sizes, total"
          :total="alarmListData.length"
          :page-sizes="[5, 10, 20]"
          :page-size="5"
          style="margin-top: 15px; justify-content: flex-start;"
        />
      </div>
      <div v-else-if="currentMenu === 'alarmStat'">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" style="margin-bottom: 20px;">
          <el-breadcrumb-item>监控</el-breadcrumb-item>
          <el-breadcrumb-item>告警</el-breadcrumb-item>
          <el-breadcrumb-item>告警统计</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 告警统计表格 -->
        <el-table :data="alarmStatData" style="width: 100%" border size="small">
          <el-table-column type="expand">
            <template #default="props">
              <div style="padding: 10px;">
                <p>详细信息: {{ props.row.detail }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作名称" min-width="120" />
          <el-table-column prop="user" label="操作用户" min-width="100" />
          <el-table-column prop="ip" label="用户IP" min-width="120" />
          <el-table-column prop="impact" label="影响" min-width="80">
            <template #default="scope">
              <el-tag :type="scope.row.impact === '一般' ? 'primary' : 'info'" effect="dark">
                {{ scope.row.impact }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="impactTime" label="影响时间" min-width="150" />
          <el-table-column prop="startTime" label="开始时间" min-width="150" />
          <el-table-column prop="endTime" label="结束时间" min-width="150" />
          <el-table-column prop="status" label="操作状态" min-width="100">
            <template #default="scope">
              <el-tag type="success" effect="dark" v-if="scope.row.status === '成功'">成功</el-tag>
              <el-tag type="danger" effect="dark" v-else>失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="failReason" label="失败原因" min-width="120">
            <template #default="scope">
              {{ scope.row.failReason || '-' }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else-if="currentMenu === 'alarmDump'">
        <!-- 面包屑导航 -->
          <el-breadcrumb separator="/" style="margin-bottom: 20px;">
          <el-breadcrumb-item>监控</el-breadcrumb-item>
          <el-breadcrumb-item>告警</el-breadcrumb-item>
          <el-breadcrumb-item>告警事件</el-breadcrumb-item>
         </el-breadcrumb>
        <!-- 告警事件内容表格 -->
        <el-table :data="alarmDumpData" style="width: 100%" border size="small">
          <el-table-column prop="operation" label="操作" min-width="100" />
          <el-table-column prop="level" label="级别" min-width="80">
            <template #default="scope">
              <el-tag :type="scope.row.level === '紧急' ? 'danger' : 'warning'" effect="dark">
                {{ scope.row.level }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" min-width="150" />
          <el-table-column prop="site1" label="站点1" min-width="100" />
          <el-table-column prop="site2" label="站点2" min-width="100" />
          <el-table-column prop="time" label="时间" min-width="150" />
          <el-table-column prop="serialNumber" label="序列号" min-width="150" />
        </el-table>
      </div>
      <div v-else-if="currentMenu === 'event'">
         <!-- 面包屑导航 -->
         <el-breadcrumb separator="/" style="margin-bottom: 20px;">
          <el-breadcrumb-item>监控</el-breadcrumb-item>
          <el-breadcrumb-item>告警</el-breadcrumb-item>
          <el-breadcrumb-item>当前事件</el-breadcrumb-item>
         </el-breadcrumb>
         
        <el-table :data="eventData" style="width: 100%" border size="small">
          <el-table-column prop="operation" label="操作" min-width="100" />
          <el-table-column prop="level" label="级别" min-width="80">
            <template #default="scope">
              <el-tag :type="scope.row.level === '紧急' ? 'danger' : 'warning'" effect="dark">
                {{ scope.row.level }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" min-width="150" />
          <el-table-column prop="site1" label="站点1" min-width="100" />
          <el-table-column prop="site2" label="站点2" min-width="100" />
          <el-table-column prop="time" label="时间" min-width="150" />
          <el-table-column prop="serialNumber" label="序列号" min-width="150" />
        </el-table>
      </div>
      <div v-else-if="currentMenu === 'performance'">
        {/* 性能内容将显示在这里，弹窗已移出 */}
        性能内容
      </div>
    </div>

    <!-- 新增：添加告警阈值规则对话框 (已移至正确位置) -->
    <el-dialog
      v-model="addRuleDialogVisible"
      title="添加告警阈值规则"
      width="60%"
      :close-on-click-modal="false"
      @close="resetNewRuleForm"
    >
      <el-form :model="newRuleForm" ref="newRuleFormRef" label-width="100px" label-position="right">
        <el-form-item label="名称" prop="name" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
          <el-input v-model="newRuleForm.name" placeholder="请输入规则名称"></el-input>
        </el-form-item>
        <el-form-item label="对象类型" prop="objectType" :rules="[{ required: true, message: '请选择对象类型', trigger: 'change' }]">
          <el-select v-model="newRuleForm.objectType" placeholder="请选择对象类型">
            <el-option label="主机" value="主机"></el-option>
            <el-option label="集群" value="集群"></el-option>
            <el-option label="存储池" value="存储池"></el-option>
            <el-option label="站点" value="站点"></el-option>
            {/* <!-- 根据需要添加更多对象类型 --> */}
          </el-select>
        </el-form-item>

        <el-form-item label="指标" prop="selectedMetricId" :rules="[{ required: true, message: '请选择指标', trigger: 'change' }]">
          <div style="border: 1px solid #dcdfe6; padding: 10px; border-radius: 4px; width:100%;">
            <el-table :data="availableMetrics" height="200" @current-change="handleMetricSelection" highlight-current-row size="small">
              <el-table-column width="50" label="选择">
                <template #default="scope">
                  <el-radio :label="scope.row.id" v-model="newRuleForm.selectedMetricId">&nbsp;</el-radio>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="指标项"></el-table-column>
              <el-table-column prop="id" label="告警ID"></el-table-column>
            </el-table>
          </div>
        </el-form-item>

        <el-form-item label="阈值">
          <el-row :gutter="20" style="width: 100%;">
            <el-col :span="12">
              <el-checkbox v-model="newRuleForm.thresholds.critical.enabled">紧急告警</el-checkbox>
              <el-input-number v-model="newRuleForm.thresholds.critical.value" :min="0" :max="1000" size="small" controls-position="right" :disabled="!newRuleForm.thresholds.critical.enabled" style="width: 80px; margin: 0 5px;"></el-input-number> %
            </el-col>
            <el-col :span="12">
              <el-checkbox v-model="newRuleForm.thresholds.major.enabled">重要告警</el-checkbox>
              <el-input-number v-model="newRuleForm.thresholds.major.value" :min="0" :max="1000" size="small" controls-position="right" :disabled="!newRuleForm.thresholds.major.enabled" style="width: 80px; margin: 0 5px;"></el-input-number> %
            </el-col>
          </el-row>
          <el-row :gutter="20" style="width: 100%; margin-top: 10px;">
            <el-col :span="12">
              <el-checkbox v-model="newRuleForm.thresholds.minor.enabled">次要告警</el-checkbox>
              <el-input-number v-model="newRuleForm.thresholds.minor.value" :min="0" :max="1000" size="small" controls-position="right" :disabled="!newRuleForm.thresholds.minor.enabled" style="width: 80px; margin: 0 5px;"></el-input-number> %
            </el-col>
            <el-col :span="12">
              <el-checkbox v-model="newRuleForm.thresholds.warning.enabled">提示告警</el-checkbox>
              <el-input-number v-model="newRuleForm.thresholds.warning.value" :min="0" :max="1000" size="small" controls-position="right" :disabled="!newRuleForm.thresholds.warning.enabled" style="width: 80px; margin: 0 5px;"></el-input-number> %
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="清除延迟" prop="clearDelay">
           <el-input-number v-model="newRuleForm.clearDelay" :min="0" size="small" controls-position="right"></el-input-number> %
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input v-model="newRuleForm.description" type="textarea" :rows="3" placeholder="请输入描述信息"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeAddRuleDialog">取消</el-button>
          <el-button type="primary" @click="submitNewRule">确定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import { 
  WarningFilled, 
  WarnTriangleFilled, 
  ArrowDown, 
  Refresh, 
  Setting,
  ArrowDownBold, 
  ArrowRightBold,
  Plus, // 新增
  Delete // 新增
} from '@element-plus/icons-vue';
import { ref } from 'vue'
const addRuleDialogVisible = ref(false)
export default {
  components: { 
    WarningFilled,
    WarnTriangleFilled,
    ArrowDown,
    Refresh, 
    Setting, 
    ArrowDownBold, 
    ArrowRightBold,
    Plus, // 新增
    Delete // 新增
  },
  data() {
    return {
      currentMenu: 'alarmList', 
      activeTab: 'realtime', 
      filters: { 
        level: '',
        type: '',
        status: 'unclear', 
        id: '',
        name: '',
      },
      thresholdActiveTab: 'default', 
      customRuleFilters: { 
        deviceName: '',
        esn: '',
        deviceType: '',
        collectionTime: [], 
        downloadStatus: '',
        failureReason: '',
        pageNum: 1, 
        pageSize: 10, 
      },
      customRulesData: [ 
        { id: 'rule1', name: '自定义规则A', metricItem: 'CPU占用率(%)', objectType: '主机', threshold: '>95', level: '紧急' },
        { id: 'rule2', name: '自定义规则B', metricItem: '内存占用率(%)', objectType: '集群', threshold: '>90', level: '重要' },
        { id: 'rule3', name: '自定义规则C', metricItem: '磁盘IOPS', objectType: '主机', threshold: '>10000', level: '紧急' },
        { id: 'rule4', name: '自定义规则D', metricItem: '磁盘吞吐量', objectType: '集群', threshold: '>500', level: '重要' },
        { id: 'rule5', name: '自定义规则E', metricItem: '网络流入速率', objectType: '主机', threshold: '>1000', level: '提示' },
        { id: 'rule6', name: '自定义规则F', metricItem: '网络流出速率', objectType: '存储池', threshold: '>800', level: '次要' },
        { id: 'rule7', name: '自定义规则G', metricItem: 'CPU占用率(%)', objectType: '站点', threshold: '>85', level: '重要' },
        { id: 'rule8', name: '自定义规则H', metricItem: '内存占用率(%)', objectType: '主机', threshold: '>88', level: '次要' },
      ],
      selectedCustomRules: [], 
      customRulesTotal: 2, 
      addRuleDialogVisible: false, // 新增：控制添加规则对话框的显示
      newRuleForm: { // 新增：新规则的表单数据
        name: '',
        objectType: '主机', // 默认值同图片
        selectedMetricId: null,
        metricName: '', // 用于在表格中显示
        thresholds: {
          critical: { enabled: false, value: null },
          major: { enabled: true, value: 90 }, // 对应图片中的 "重要告警"
          minor: { enabled: true, value: 80 }, // 对应图片中的 "次要告警"
          warning: { enabled: false, value: null },
        },
        clearDelay: 5, // 默认值同图片
        description: '',
      },
      availableMetrics: [ // 新增：可选的指标列表（示例）
        { name: '内存占用率', id: '15.1000033' },
        { name: 'CPU占用率', id: '15.1000032' },
        { name: '网络流出速率', id: '15.1000034' },
        { name: '网络流入速率', id: '15.1000024' },
        { name: '磁盘IOPS', id: '15.1000035' },
        { name: '磁盘吞吐量', id: '15.1000036' },
      ],
      alarmThresholdData: [ 
        {
          groupName: '集群',
          isExpanded: true,
          items: [
            { metric: '网络流入速率', alarmId: '15.1000028', critical: '未启用', major: '>80%', minor: '>70%', delay: '5%' },
            { metric: '网络流出速率', alarmId: '15.1000027', critical: '未启用', major: '>80%', minor: '>70%', delay: '5%' },
            { metric: '内存占用率', alarmId: '15.1000026', critical: '未启用', major: '>80%', minor: '>70%', delay: '5%' },
            { metric: 'CPU占用率', alarmId: '15.1000025', critical: '未启用', major: '>80%', minor: '>70%', delay: '5%' },
          ]
        },
        {
          groupName: '主机',
          isExpanded: true,
          items: [
            { metric: '内存占用率', alarmId: '15.1000033', critical: '未启用', major: '>90%', minor: '>80%', delay: '5%' },
            { metric: 'CPU占用率', alarmId: '15.1000032', critical: '未启用', major: '>90%', minor: '>80%', delay: '5%' },
            { metric: '网络流出速率', alarmId: '15.1000034', critical: '未启用', major: '>90%', minor: '>80%', delay: '5%' },
            { metric: '网络流入速率', alarmId: '15.1000024', critical: '未启用', major: '>90%', minor: '>80%', delay: '5%' },
            { metric: '内存预留率', alarmId: '15.1000020', critical: '未启用', major: '>95%', minor: '未启用', delay: '5%' },
            { metric: 'Swap分区占用率', alarmId: '15.1003892', critical: '未启用', major: '>90%', minor: '未启用', delay: '5%' },
            { metric: '主机CPU复用率', alarmId: '15.1003891', critical: '未启用', major: '>300%', minor: '未启用', delay: '5%' },
            { metric: '主机内存复用率', alarmId: '15.1003888', critical: '未启用', major: '>120%', minor: '未启用', delay: '5%' },
            { metric: '主机网卡流入速率', alarmId: '15.1006032', critical: '未启用', major: '未启用', minor: '未启用', delay: '5%' },
            { metric: '主机网卡流出速率', alarmId: '15.1006031', critical: '未启用', major: '未启用', minor: '未启用', delay: '5%' },
            { metric: '数据存储I/O响应时延', alarmId: '15.1005007', critical: '未启用', major: '>50ms', minor: '3ms', delay: '5%' },
            { metric: '主机虚拟化内存占用率', alarmId: '15.1008008', critical: '未启用', major: '>90%', minor: '>80%', delay: '5%' },
          ]
        }
      ],
      openMenus: {
        monitor: true,
        // alarm: true, // 'alarm' key seems to be a typo for 'monitor' or not used for openMenus logic
      },
      menuList: [
        { key: 'alarmList', label: '告警列表' },
        { key: 'alarmValue', label: '告警阈值' },
        { key: 'alarmBoard', label: '告警屏蔽' },
        { key: 'alarmStat', label: '告警统计' },
        { key: 'alarmDump', label: '告警事件' },
        
      ],
      alarmListData: [ 
        {
          id: '2000',
          level: '重要',
          name: '服务器D 出现CPU使用率过高问题',
          object: '服务器D',
          objectType: 'CPU使用率过高', // Assuming '告警类型' maps to 'objectType'
          generateTime: '2025-05-11 23:14:38',
          clearTime: '2025-05-11 23:32:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。', // Assuming '消除过程' maps to 'clearType'
        },
        {
          id: '2001',
          level: '次要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-14 08:14:38',
          clearTime: '2025-05-14 08:52:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2002',
          level: '紧急',
          name: '服务器B 出现CPU使用率过高问题',
          object: '服务器B',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-13 03:14:38',
          clearTime: '2025-05-13 03:41:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2003',
          level: '提示',
          name: '服务器D 出现CPU使用率过高问题',
          object: '服务器D',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-15 05:14:38',
          clearTime: '2025-05-15 07:03:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2004',
          level: '次要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-13 14:14:38',
          clearTime: '2025-05-13 15:22:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2005',
          level: '重要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-12 05:14:38',
          clearTime: '2025-05-12 07:47:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2006',
          level: '次要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-10 13:14:38',
          clearTime: '2025-05-10 14:32:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2007',
          level: '紧急',
          name: '服务器B 出现内存占用异常问题',
          object: '服务器B',
          objectType: '内存占用异常',
          generateTime: '2025-05-10 19:14:38',
          clearTime: '2025-05-10 21:42:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2008',
          level: '紧急',
          name: '服务器D 出现内存占用异常问题',
          object: '服务器D',
          objectType: '内存占用异常',
          generateTime: '2025-05-11 05:14:38',
          clearTime: '2025-05-11 06:04:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2009',
          level: '紧急',
          name: '服务器D 出现内存占用异常问题',
          object: '服务器D',
          objectType: '内存占用异常',
          generateTime: '2025-05-12 09:14:38',
          clearTime: '2025-05-12 10:51:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2010',
          level: '紧急',
          name: '服务器B 出现内存占用异常问题',
          object: '服务器B',
          objectType: '内存占用异常',
          generateTime: '2025-05-16 05:14:38',
          clearTime: '2025-05-16 07:28:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2011',
          level: '提示',
          name: '服务器A 出现内存占用异常问题',
          object: '服务器A',
          objectType: '内存占用异常',
          generateTime: '2025-05-14 09:14:38',
          clearTime: '2025-05-14 10:48:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2012',
          level: '紧急',
          name: '服务器B 出现内存占用异常问题',
          object: '服务器B',
          objectType: '内存占用异常',
          generateTime: '2025-05-15 12:14:38',
          clearTime: '2025-05-15 13:23:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2013',
          level: '重要',
          name: '服务器A 出现内存占用异常问题',
          object: '服务器A',
          objectType: '内存占用异常',
          generateTime: '2025-05-13 01:14:38',
          clearTime: '2025-05-13 02:02:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2014',
          level: '重要',
          name: '服务器C 出现磁盘空间不足问题',
          object: '服务器C',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-15 18:14:38',
          clearTime: '2025-05-15 19:02:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2015',
          level: '次要',
          name: '服务器B 出现磁盘空间不足问题',
          object: '服务器B',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-10 08:14:38',
          clearTime: '2025-05-10 08:49:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2016',
          level: '紧急',
          name: '服务器D 出现磁盘空间不足问题',
          object: '服务器D',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-12 16:14:38',
          clearTime: '2025-05-12 18:04:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2017',
          level: '紧急',
          name: '服务器C 出现磁盘空间不足问题',
          object: '服务器C',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-14 12:14:38',
          clearTime: '2025-05-14 12:32:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2018',
          level: '紧急',
          name: '服务器C 出现磁盘空间不足问题',
          object: '服务器C',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-14 15:14:38',
          clearTime: '2025-05-14 17:08:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2019',
          level: '次要',
          name: '服务器B 出现磁盘空间不足问题',
          object: '服务器B',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-14 09:14:38',
          clearTime: '2025-05-14 10:45:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2020',
          level: '重要',
          name: '服务器D 出现磁盘空间不足问题',
          object: '服务器D',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-12 04:14:38',
          clearTime: '2025-05-12 05:27:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2021',
          level: '紧急',
          name: '服务器D 出现网络连接中断问题',
          object: '服务器D',
          objectType: '网络连接中断',
          generateTime: '2025-05-11 08:14:38',
          clearTime: '2025-05-11 09:39:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2022',
          level: '次要',
          name: '服务器D 出现网络连接中断问题',
          object: '服务器D',
          objectType: '网络连接中断',
          generateTime: '2025-05-11 19:14:38',
          clearTime: '2025-05-11 20:51:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2023',
          level: '重要',
          name: '服务器A 出现网络连接中断问题',
          object: '服务器A',
          objectType: '网络连接中断',
          generateTime: '2025-05-13 10:14:38',
          clearTime: '2025-05-13 10:58:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2024',
          level: '重要',
          name: '服务器B 出现网络连接中断问题',
          object: '服务器B',
          objectType: '网络连接中断',
          generateTime: '2025-05-12 11:14:38',
          clearTime: '2025-05-12 13:21:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2025',
          level: '重要',
          name: '服务器C 出现网络连接中断问题',
          object: '服务器C',
          objectType: '网络连接中断',
          generateTime: '2025-05-15 03:14:38',
          clearTime: '2025-05-15 06:04:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2026',
          level: '次要',
          name: '服务器B 出现网络连接中断问题',
          object: '服务器B',
          objectType: '网络连接中断',
          generateTime: '2025-05-13 20:14:38',
          clearTime: '2025-05-13 21:13:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2027',
          level: '提示',
          name: '服务器A 出现网络连接中断问题',
          object: '服务器A',
          objectType: '网络连接中断',
          generateTime: '2025-05-13 12:14:38',
          clearTime: '2025-05-13 13:31:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        }
      ],alarmListData: [ 
        {
          id: '2000',
          level: '重要',
          name: '服务器D 出现CPU使用率过高问题',
          object: '服务器D',
          objectType: 'CPU使用率过高', // Assuming '告警类型' maps to 'objectType'
          generateTime: '2025-05-11 23:14:38',
          clearTime: '2025-05-11 23:32:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。', // Assuming '消除过程' maps to 'clearType'
        },
        {
          id: '2001',
          level: '次要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-14 08:14:38',
          clearTime: '2025-05-14 08:52:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2002',
          level: '紧急',
          name: '服务器B 出现CPU使用率过高问题',
          object: '服务器B',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-13 03:14:38',
          clearTime: '2025-05-13 03:41:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2003',
          level: '提示',
          name: '服务器D 出现CPU使用率过高问题',
          object: '服务器D',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-15 05:14:38',
          clearTime: '2025-05-15 07:03:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2004',
          level: '次要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-13 14:14:38',
          clearTime: '2025-05-13 15:22:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2005',
          level: '重要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-12 05:14:38',
          clearTime: '2025-05-12 07:47:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2006',
          level: '次要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-10 13:14:38',
          clearTime: '2025-05-10 14:32:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2007',
          level: '紧急',
          name: '服务器B 出现内存占用异常问题',
          object: '服务器B',
          objectType: '内存占用异常',
          generateTime: '2025-05-10 19:14:38',
          clearTime: '2025-05-10 21:42:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2008',
          level: '紧急',
          name: '服务器D 出现内存占用异常问题',
          object: '服务器D',
          objectType: '内存占用异常',
          generateTime: '2025-05-11 05:14:38',
          clearTime: '2025-05-11 06:04:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2009',
          level: '紧急',
          name: '服务器D 出现内存占用异常问题',
          object: '服务器D',
          objectType: '内存占用异常',
          generateTime: '2025-05-12 09:14:38',
          clearTime: '2025-05-12 10:51:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2010',
          level: '紧急',
          name: '服务器B 出现内存占用异常问题',
          object: '服务器B',
          objectType: '内存占用异常',
          generateTime: '2025-05-16 05:14:38',
          clearTime: '2025-05-16 07:28:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2011',
          level: '提示',
          name: '服务器A 出现内存占用异常问题',
          object: '服务器A',
          objectType: '内存占用异常',
          generateTime: '2025-05-14 09:14:38',
          clearTime: '2025-05-14 10:48:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2012',
          level: '紧急',
          name: '服务器B 出现内存占用异常问题',
          object: '服务器B',
          objectType: '内存占用异常',
          generateTime: '2025-05-15 12:14:38',
          clearTime: '2025-05-15 13:23:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2013',
          level: '重要',
          name: '服务器A 出现内存占用异常问题',
          object: '服务器A',
          objectType: '内存占用异常',
          generateTime: '2025-05-13 01:14:38',
          clearTime: '2025-05-13 02:02:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2014',
          level: '重要',
          name: '服务器C 出现磁盘空间不足问题',
          object: '服务器C',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-15 18:14:38',
          clearTime: '2025-05-15 19:02:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2015',
          level: '次要',
          name: '服务器B 出现磁盘空间不足问题',
          object: '服务器B',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-10 08:14:38',
          clearTime: '2025-05-10 08:49:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2016',
          level: '紧急',
          name: '服务器D 出现磁盘空间不足问题',
          object: '服务器D',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-12 16:14:38',
          clearTime: '2025-05-12 18:04:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2017',
          level: '紧急',
          name: '服务器C 出现磁盘空间不足问题',
          object: '服务器C',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-14 12:14:38',
          clearTime: '2025-05-14 12:32:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2018',
          level: '紧急',
          name: '服务器C 出现磁盘空间不足问题',
          object: '服务器C',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-14 15:14:38',
          clearTime: '2025-05-14 17:08:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2019',
          level: '次要',
          name: '服务器B 出现磁盘空间不足问题',
          object: '服务器B',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-14 09:14:38',
          clearTime: '2025-05-14 10:45:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2020',
          level: '重要',
          name: '服务器D 出现磁盘空间不足问题',
          object: '服务器D',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-12 04:14:38',
          clearTime: '2025-05-12 05:27:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2021',
          level: '紧急',
          name: '服务器D 出现网络连接中断问题',
          object: '服务器D',
          objectType: '网络连接中断',
          generateTime: '2025-05-11 08:14:38',
          clearTime: '2025-05-11 09:39:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2022',
          level: '次要',
          name: '服务器D 出现网络连接中断问题',
          object: '服务器D',
          objectType: '网络连接中断',
          generateTime: '2025-05-11 19:14:38',
          clearTime: '2025-05-11 20:51:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2023',
          level: '重要',
          name: '服务器A 出现网络连接中断问题',
          object: '服务器A',
          objectType: '网络连接中断',
          generateTime: '2025-05-13 10:14:38',
          clearTime: '2025-05-13 10:58:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2024',
          level: '重要',
          name: '服务器B 出现网络连接中断问题',
          object: '服务器B',
          objectType: '网络连接中断',
          generateTime: '2025-05-12 11:14:38',
          clearTime: '2025-05-12 13:21:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2025',
          level: '重要',
          name: '服务器C 出现网络连接中断问题',
          object: '服务器C',
          objectType: '网络连接中断',
          generateTime: '2025-05-15 03:14:38',
          clearTime: '2025-05-15 06:04:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2026',
          level: '次要',
          name: '服务器B 出现网络连接中断问题',
          object: '服务器B',
          objectType: '网络连接中断',
          generateTime: '2025-05-13 20:14:38',
          clearTime: '2025-05-13 21:13:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2027',
          level: '提示',
          name: '服务器A 出现网络连接中断问题',
          object: '服务器A',
          objectType: '网络连接中断',
          generateTime: '2025-05-13 12:14:38',
          clearTime: '2025-05-13 13:31:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        }
      ],alarmListData: [ 
        {
          id: '2000',
          level: '重要',
          name: '服务器D 出现CPU使用率过高问题',
          object: '服务器D',
          objectType: 'CPU使用率过高', // Assuming '告警类型' maps to 'objectType'
          generateTime: '2025-05-11 23:14:38',
          clearTime: '2025-05-11 23:32:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。', // Assuming '消除过程' maps to 'clearType'
        },
        {
          id: '2001',
          level: '次要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-14 08:14:38',
          clearTime: '2025-05-14 08:52:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2002',
          level: '紧急',
          name: '服务器B 出现CPU使用率过高问题',
          object: '服务器B',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-13 03:14:38',
          clearTime: '2025-05-13 03:41:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2003',
          level: '提示',
          name: '服务器D 出现CPU使用率过高问题',
          object: '服务器D',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-15 05:14:38',
          clearTime: '2025-05-15 07:03:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2004',
          level: '次要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-13 14:14:38',
          clearTime: '2025-05-13 15:22:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2005',
          level: '重要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-12 05:14:38',
          clearTime: '2025-05-12 07:47:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2006',
          level: '次要',
          name: '服务器A 出现CPU使用率过高问题',
          object: '服务器A',
          objectType: 'CPU使用率过高',
          generateTime: '2025-05-10 13:14:38',
          clearTime: '2025-05-10 14:32:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2007',
          level: '紧急',
          name: '服务器B 出现内存占用异常问题',
          object: '服务器B',
          objectType: '内存占用异常',
          generateTime: '2025-05-10 19:14:38',
          clearTime: '2025-05-10 21:42:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2008',
          level: '紧急',
          name: '服务器D 出现内存占用异常问题',
          object: '服务器D',
          objectType: '内存占用异常',
          generateTime: '2025-05-11 05:14:38',
          clearTime: '2025-05-11 06:04:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2009',
          level: '紧急',
          name: '服务器D 出现内存占用异常问题',
          object: '服务器D',
          objectType: '内存占用异常',
          generateTime: '2025-05-12 09:14:38',
          clearTime: '2025-05-12 10:51:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2010',
          level: '紧急',
          name: '服务器B 出现内存占用异常问题',
          object: '服务器B',
          objectType: '内存占用异常',
          generateTime: '2025-05-16 05:14:38',
          clearTime: '2025-05-16 07:28:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2011',
          level: '提示',
          name: '服务器A 出现内存占用异常问题',
          object: '服务器A',
          objectType: '内存占用异常',
          generateTime: '2025-05-14 09:14:38',
          clearTime: '2025-05-14 10:48:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2012',
          level: '紧急',
          name: '服务器B 出现内存占用异常问题',
          object: '服务器B',
          objectType: '内存占用异常',
          generateTime: '2025-05-15 12:14:38',
          clearTime: '2025-05-15 13:23:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2013',
          level: '重要',
          name: '服务器A 出现内存占用异常问题',
          object: '服务器A',
          objectType: '内存占用异常',
          generateTime: '2025-05-13 01:14:38',
          clearTime: '2025-05-13 02:02:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2014',
          level: '重要',
          name: '服务器C 出现磁盘空间不足问题',
          object: '服务器C',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-15 18:14:38',
          clearTime: '2025-05-15 19:02:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2015',
          level: '次要',
          name: '服务器B 出现磁盘空间不足问题',
          object: '服务器B',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-10 08:14:38',
          clearTime: '2025-05-10 08:49:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2016',
          level: '紧急',
          name: '服务器D 出现磁盘空间不足问题',
          object: '服务器D',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-12 16:14:38',
          clearTime: '2025-05-12 18:04:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2017',
          level: '紧急',
          name: '服务器C 出现磁盘空间不足问题',
          object: '服务器C',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-14 12:14:38',
          clearTime: '2025-05-14 12:32:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2018',
          level: '紧急',
          name: '服务器C 出现磁盘空间不足问题',
          object: '服务器C',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-14 15:14:38',
          clearTime: '2025-05-14 17:08:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2019',
          level: '次要',
          name: '服务器B 出现磁盘空间不足问题',
          object: '服务器B',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-14 09:14:38',
          clearTime: '2025-05-14 10:45:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2020',
          level: '重要',
          name: '服务器D 出现磁盘空间不足问题',
          object: '服务器D',
          objectType: '磁盘空间不足',
          generateTime: '2025-05-12 04:14:38',
          clearTime: '2025-05-12 05:27:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2021',
          level: '紧急',
          name: '服务器D 出现网络连接中断问题',
          object: '服务器D',
          objectType: '网络连接中断',
          generateTime: '2025-05-11 08:14:38',
          clearTime: '2025-05-11 09:39:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2022',
          level: '次要',
          name: '服务器D 出现网络连接中断问题',
          object: '服务器D',
          objectType: '网络连接中断',
          generateTime: '2025-05-11 19:14:38',
          clearTime: '2025-05-11 20:51:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器D并手动处理，最终成功清除告警。',
        },
        {
          id: '2023',
          level: '重要',
          name: '服务器A 出现网络连接中断问题',
          object: '服务器A',
          objectType: '网络连接中断',
          generateTime: '2025-05-13 10:14:38',
          clearTime: '2025-05-13 10:58:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        },
        {
          id: '2024',
          level: '重要',
          name: '服务器B 出现网络连接中断问题',
          object: '服务器B',
          objectType: '网络连接中断',
          generateTime: '2025-05-12 11:14:38',
          clearTime: '2025-05-12 13:21:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2025',
          level: '重要',
          name: '服务器C 出现网络连接中断问题',
          object: '服务器C',
          objectType: '网络连接中断',
          generateTime: '2025-05-15 03:14:38',
          clearTime: '2025-05-15 06:04:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器C并手动处理，最终成功清除告警。',
        },
        {
          id: '2026',
          level: '次要',
          name: '服务器B 出现网络连接中断问题',
          object: '服务器B',
          objectType: '网络连接中断',
          generateTime: '2025-05-13 20:14:38',
          clearTime: '2025-05-13 21:13:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器B并手动处理，最终成功清除告警。',
        },
        {
          id: '2027',
          level: '提示',
          name: '服务器A 出现网络连接中断问题',
          object: '服务器A',
          objectType: '网络连接中断',
          generateTime: '2025-05-13 12:14:38',
          clearTime: '2025-05-13 13:31:38',
          clearType: '问题由监控系统检测出后，管理员远程登录服务器A并手动处理，最终成功清除告警。',
        }
      ],
      alarmStatData: [
        {
          action: '用户登陆',
          user: 'admin',
          ip: '192.168.100.1',
          impact: '提示',
          impactTime: '2025-03-21 05:27:16',
          startTime: '2025-03-21 05:27:16',
          endTime: '2025-03-21 05:27:17',
          status: '成功',
          failReason: '',
          detail: '用户登陆系统'
        },
        {
          action: '用户登陆',
          user: 'admin',
          ip: '192.168.100.1',
          impact: '提示',
          impactTime: '2025-03-21 05:29:39',
          startTime: '2025-03-21 05:29:39',
          endTime: '2025-03-21 05:29:39',
          status: '成功',
          failReason: '',
          detail: '用户登陆系统'
        },
        {
          action: '用户登陆',
          user: 'admin',
          ip: '192.168.100.1',
          impact: '提示',
          impactTime: '2025-03-21 05:29:41',
          startTime: '2025-03-21 05:29:41',
          endTime: '2025-03-21 05:29:42',
          status: '成功',
          failReason: '',
          detail: '用户登陆系统'
        },
        {
          action: '用户登陆',
          user: 'admin',
          ip: '192.168.100.1',
          impact: '提示',
          impactTime: '2025-03-21 05:29:58',
          startTime: '2025-03-21 05:29:58',
          endTime: '2025-03-21 05:29:59',
          status: '成功',
          failReason: '',
          detail: '用户登陆系统'
        },
        {
          action: '创建虚拟机',
          user: 'admin',
          ip: '192.168.100.1',
          impact: '一般',
          impactTime: '2025-03-21 05:42:23',
          startTime: '2025-03-21 05:42:23',
          endTime: '2025-03-21 05:42:23',
          status: '成功',
          failReason: '',
          detail: '创建虚拟机成功'
        },
        {
          action: '删除虚拟机',
          user: 'admin',
          ip: '192.168.100.1',
          impact: '一般',
          impactTime: '2025-03-21 06:00:01',
          startTime: '2025-03-21 06:00:01',
          endTime: '2025-03-21 06:00:02',
          status: '成功',
          failReason: '',
          detail: '删除虚拟机成功'
        },
        {
          action: '修改密码',
          user: 'admin',
          ip: '192.168.100.1',
          impact: '提示',
          impactTime: '2025-03-21 06:10:10',
          startTime: '2025-03-21 06:10:10',
          endTime: '2025-03-21 06:10:11',
          status: '成功',
          failReason: '',
          detail: '修改密码成功'
        },
        {
          action: '重启主机',
          user: 'admin',
          ip: '192.168.100.1',
          impact: '一般',
          impactTime: '2025-03-21 06:20:20',
          startTime: '2025-03-21 06:20:20',
          endTime: '2025-03-21 06:20:25',
          status: '失败',
          failReason: '主机响应超时',
          detail: '重启主机失败'
        },
        {
          action: '导入镜像',
          user: 'admin',
          ip: '192.168.100.1',
          impact: '提示',
          impactTime: '2025-03-21 06:30:30',
          startTime: '2025-03-21 06:30:30',
          endTime: '2025-03-21 06:30:35',
          status: '成功',
          failReason: '',
          detail: '导入镜像成功'
        },
        {
          action: '分配存储',
          user: 'admin',
          ip: '192.168.100.1',
          impact: '一般',
          impactTime: '2025-03-21 06:40:40',
          startTime: '2025-03-21 06:40:40',
          endTime: '2025-03-21 06:40:45',
          status: '成功',
          failReason: '',
          detail: '分配存储成功'
        }
      ],
      alarmDumpData: [
    {
        operation: '操作1',
        level: '紧急',
        name: 'OSPF邻居状态变化',
        site1: 'Site Y',
        site2: 'Y Export',
        time: '2024-04-28 11:11:09',
        serialNumber: 'ESN=100233TBH+2356972450'
    },
    {
        operation: '操作2',
        level: '重要',
        name: '设备故障',
        site1: 'Site X',
        site2: 'X Import',
        time: '2024-04-29 12:12:12',
        serialNumber: 'ESN=100233TBH+2356972451'
    },
    {
        operation: '操作3',
        level: '提示',
        name: '网络连接恢复',
        site1: 'Site Z',
        site2: 'Z Junction',
        time: '2024-04-30 13:13:13',
        serialNumber: 'ESN=100233TBH+2356972452'
    },
    {
        operation: '操作4',
        level: '紧急',
        name: '系统故障',
        site1: 'Site W',
        site2: 'W Junction',
        time: '2024-05-01 14:14:14',
        serialNumber: 'ESN=100233TBH+2356972453'
    },
    {
        operation: '操作5',
        level: '重要',
        name: '设备恢复',
        site1: 'Site V',
        site2: 'V Junction',
        time: '2024-05-02 15:15:15',
        serialNumber: 'ESN=100233TBH+2356972454'
    },
    {
        operation: '操作6',
        level: '提示',
        name: '网络连接中断',
        site1: 'Site U',
        site2: 'U Junction',
        time: '2024-05-03 16:16:16',
        serialNumber: 'ESN=100233TBH+2356972455'
    },
    {
        operation: '操作7',
        level: '紧急',
        name: '系统恢复',
        site1: 'Site T',
        site2: 'T Junction',
        time: '2024-05-04 17:17:17',
        serialNumber: 'ESN=100233TBH+2356972456'
    },
    {
        operation: '操作8',
        level: '重要',
        name: '设备警告',
        site1: 'Site S',
        site2: 'S Junction',
        time: '2024-05-05 18:18:18',
        serialNumber: 'ESN=100233TBH+2356972457'
    },
    {
        operation: '操作9',
        level: '提示',
        name: '网络恢复',
        site1: 'Site R',
        site2: 'R Junction',
        time: '2024-05-06 19:19:19',
        serialNumber: 'ESN=100233TBH+2356972458'
    },
    {
        operation: '操作10',
        level: '紧急',
        name: '系统警告',
        site1: 'Site Q',
        site2: 'Q Junction',
        time: '2024-05-07 20:20:20',
        serialNumber: 'ESN=100233TBH+2356972459'
    }
  ],eventData: [
      {
        operation: '设备故障',
        level: '紧急',
        name: '设备接口Down',
        site1: 'Site_Y',
        site2: 'Y_Core1',
        time: '2024-04-28 14:00:00',
        serialNumber: 'OID=1.3.6.1.4.1.2011.5.25.191.2.1.index=0;ESN=DM2005006247'
      },
      {
        operation: '网络中断',
        level: '重要',
        name: '链路故障',
        site1: 'Site_Y',
        site2: 'Y_Core2',
        time: '2024-04-28 14:05:00',
        serialNumber: 'OID=1.3.6.1.4.1.2011.5.25.191.2.1.index=1;ESN=DM2005006248'
      },
      {
        operation: '性能下降',
        level: '提示',
        name: 'CPU使用率高',
        site1: 'Site_Y',
        site2: 'Y_Export',
        time: '2024-04-28 14:10:00',
        serialNumber: 'OID=1.3.6.1.4.1.2011.5.25.191.2.1.index=2;ESN=DM2005006249'
      },
      {
        operation: '设备恢复',
        level: '紧急',
        name: '设备接口Up',
        site1: 'Site_Y',
        site2: 'ACC1',
        time: '2024-04-28 14:15:00',
        serialNumber: 'OID=1.3.6.1.4.1.2011.5.25.191.2.1.index=3;ESN=DM2005006250'
      },
      {
        operation: '链路恢复',
        level: '重要',
        name: '链路正常',
        site1: 'Site_Y',
        site2: 'ACC2',
        time: '2024-04-28 14:20:00',
        serialNumber: 'OID=1.3.6.1.4.1.2011.5.25.191.2.1.index=4;ESN=DM2005006251'
      },
      {
        operation: '性能恢复',
        level: '提示',
        name: 'CPU使用率正常',
        site1: 'Site_Store',
        site2: 'Store_Export',
        time: '2024-04-28 14:25:00',
        serialNumber: 'OID=1.3.6.1.4.1.2011.5.25.191.2.1.index=5;ESN=DM2005006252'
      },
      {
        operation: '设备故障',
        level: '紧急',
        name: '设备接口Down',
        site1: 'Site_Y',
        site2: 'Y_Core1',
        time: '2024-04-28 14:30:00',
        serialNumber: 'OID=1.3.6.1.4.1.2011.5.25.191.2.1.index=6;ESN=DM2005006253'
      },
      {
        operation: '网络中断',
        level: '重要',
        name: '链路故障',
        site1: 'Site_Y',
        site2: 'Y_Core2',
        time: '2024-04-28 14:35:00',
        serialNumber: 'OID=1.3.6.1.4.1.2011.5.25.191.2.1.index=7;ESN=DM2005006254'
      },
      {
        operation: '性能下降',
        level: '提示',
        name: 'CPU使用率高',
        site1: 'Site_Y',
        site2: 'Y_Export',
        time: '2024-04-28 14:40:00',
        serialNumber: 'OID=1.3.6.1.4.1.2011.5.25.191.2.1.index=8;ESN=DM2005006255'
      },
      {
        operation: '设备恢复',
        level: '紧急',
        name: '设备接口Up',
        site1: 'Site_Y',
        site2: 'ACC1',
        time: '2024-04-28 14:45:00',
        serialNumber: 'OID=1.3.6.1.4.1.2011.5.25.191.2.1.index=9;ESN=DM2005006256'
      }
    ],
    };
  },
  methods: {
    selectMenu(key) {
      this.currentMenu = key;
      if (key === 'alarmValue') {
        // this.alarmThresholdData.forEach(group => group.isExpanded = true); // 保持之前的逻辑或按需调整
      }
    },
    toggleMenu(menu) {
      this.openMenus[menu] = !this.openMenus[menu];
    },
    refreshData() { 
      console.log('Refreshing data with filters:', this.filters);
    },
    toggleThresholdGroup(group) { 
      group.isExpanded = !group.isExpanded;
    },
    searchCustomRules() { // 新增：查询自定义规则的方法（示例）
      console.log('Searching custom rules with filters:', this.customRuleFilters);
      // 在这里添加实际的查询逻辑
    },
    resetCustomRuleFilters() { // 新增：重置自定义规则筛选条件的方法
      this.customRuleFilters = {
        deviceName: '',
        esn: '',
        deviceType: '',
        collectionTime: [],
        downloadStatus: '',
        failureReason: '',
      };
      console.log('Custom rule filters reset');
    },
    addCustomRule() { // 新增：添加自定义规则的方法（示例）
      console.log('Add new custom rule');
      // 在这里添加打开新增规则对话框或页面的逻辑
    },
    handleAddCustomRuleRow() { // 新增：处理表格上方的“添加”按钮点击
      console.log('Adding a new row to custom rules table (inline or simple dialog)');
      // 这里可以实现添加新规则行的逻辑，例如弹出一个简单的行内编辑或对话框
      // 为了演示，我们添加一条空规则
      this.customRulesData.push({ id: `new_rule_${Date.now()}`, name: '', metricItem: '', objectType: '', threshold: '', level: '' });
      this.customRulesTotal = this.customRulesData.length;
    },
    handleDeleteSelectedCustomRules() { // 新增：处理表格上方的“删除”按钮点击
      if (this.selectedCustomRules.length === 0) {
        this.$message.warning('请至少选择一条规则进行删除');
        return;
      }
      this.$confirm(`确定删除选中的 ${this.selectedCustomRules.length} 条规则吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.customRulesData = this.customRulesData.filter(
          rule => !this.selectedCustomRules.some(selected => selected.id === rule.id)
        );
        this.selectedCustomRules = [];
        this.customRulesTotal = this.customRulesData.length;
        this.$message.success('删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    handleCustomRuleSelectionChange(selection) { // 新增：处理表格行选中变化
      this.selectedCustomRules = selection;
    },
    editCustomRule(row) { // 新增：行内修改按钮
      console.log('Editing custom rule:', row);
      // 实现修改逻辑
    },
    deleteCustomRule(row) { // 新增：行内删除按钮
       this.$confirm(`确定删除规则 "${row.name}" 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.customRulesData = this.customRulesData.filter(rule => rule.id !== row.id);
        this.customRulesTotal = this.customRulesData.length;
        this.$message.success('删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    // 新增：自定义规则分页处理
    handleCustomRuleSizeChange(val) {
      this.customRuleFilters.pageSize = val;
      this.searchCustomRules(); // 重新查询数据
    },
    handleCustomRulePageChange(val) {
      this.customRuleFilters.pageNum = val;
      this.searchCustomRules(); // 重新查询数据
    },
    submitNewRule() {
      // 校验表单
      this.$refs.newRuleFormRef.validate((valid) => {
        if (valid) {
          // 组装新规则对象
          const thresholds = [];
          let level = '';
          if (this.newRuleForm.thresholds.critical.enabled && this.newRuleForm.thresholds.critical.value !== null) {
            thresholds.push(`>${this.newRuleForm.thresholds.critical.value}`);
            level = '紧急';
          }
          if (this.newRuleForm.thresholds.major.enabled && this.newRuleForm.thresholds.major.value !== null) {
            thresholds.push(`>${this.newRuleForm.thresholds.major.value}`);
            if (!level) level = '重要';
          }
          if (this.newRuleForm.thresholds.minor.enabled && this.newRuleForm.thresholds.minor.value !== null) {
            thresholds.push(`>${this.newRuleForm.thresholds.minor.value}`);
            if (!level) level = '次要';
          }
          if (this.newRuleForm.thresholds.warning.enabled && this.newRuleForm.thresholds.warning.value !== null) {
            thresholds.push(`>${this.newRuleForm.thresholds.warning.value}`);
            if (!level) level = '提示';
          }
          const newRule = {
            id: `rule_${Date.now()}`,
            name: this.newRuleForm.name,
            metricItem: this.availableMetrics.find(m => m.id === this.newRuleForm.selectedMetricId)?.name || '',
            objectType: this.newRuleForm.objectType,
            threshold: thresholds.join(';'),
            level: level,
          };
          // 添加到表格数据
          this.customRulesData.unshift(newRule);
          this.customRulesTotal = this.customRulesData.length;
          this.addRuleDialogVisible = false;
          this.resetNewRuleForm();
          this.$message.success('添加成功');
        } else {
          this.$message.error('请完善表单信息');
        }
      });
    },
    resetNewRuleForm() {
      this.newRuleForm = {
        name: '',
        objectType: '主机',
        selectedMetricId: null,
        metricName: '',
        thresholds: {
          critical: { enabled: false, value: null },
          major: { enabled: true, value: 90 },
          minor: { enabled: true, value: 80 },
          warning: { enabled: false, value: null },
        },
        clearDelay: 5,
        description: '',
      };
      if (this.$refs.newRuleFormRef) {
        this.$refs.newRuleFormRef.clearValidate();
      }
    },
  }
};
</script>

<style scoped>
.container {
  display: flex;
  min-height: 100vh; /* Ensure container takes full height */
}
.sidebar {
  font-family: 'Arial', sans-serif; /* 更改字体 */
  font-size: 14px; /* 调整字体大小 */
  color: #333; /* 设置字体颜色 */
  width: 200px;
  background: #f5f7fa; /* 修改：更浅的背景色，接近图片右侧内容区背景 */
  /* min-height: 100vh; */ /* Removed as container handles min-height */
  padding-top: 16px;
  border-right: 1px solid #e4e7ed; /* 添加右边框以区分内容区 */
}
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar > ul > li {
  margin-bottom: 8px;
}
.sidebar .group-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #909399; /* 修改：调整分组标题颜色 */
  font-size: 12px; /* 调整字号 */
  padding: 8px 24px 8px 20px; /* 调整内边距 */
  letter-spacing: 1px;
  cursor: default;
}
.sidebar .submenu {
  padding-left: 20px;
}
.sidebar .submenu li {
  padding: 5px 0;
  cursor: pointer;
  transition: color 0.3s;
  padding: 10px 24px 10px 36px; /* 调整内边距 */
  color: #303133; /* 修改：子菜单项默认文字颜色 */
  border-radius: 0; /* 移除圆角，图片中似乎没有 */
  transition: background 0.2s, color 0.2s;
}


.submenu li:hover {
  color: #66b1ff; /* 鼠标悬停时的颜色 */
}

.submenu > li.active,
.sidebar .submenu > li:hover {
  background: #409eff;
  color: #fff;
}
/* .sidebar .submenu > li { */ /* Removed redundant rule */
  /* cursor: pointer; */
/* } */
.sidebar .main-menu {
  cursor: pointer;
  padding: 5px 0;
  transition: color 0.3s;
  padding: 10px 24px 10px 20px; /* 调整内边距 */
  color: #303133; /* 修改：主菜单项默认文字颜色 */
  border-radius: 0; /* 移除圆角 */
  transition: background 0.2s, color 0.2s;
}
.sidebar .main-menu:hover {
  color: #409EFF; /* 鼠标悬停时的颜色 */
}

.main-menu.active, /* 主菜单项也应该有激活状态，尽管当前例子中未直接使用 */
.sidebar .main-menu:hover {
  background: #409eff;
  color: #fff;
}
.sidebar .arrow {
  display: inline-block;
  width: 12px;
  color: #909399; /* 箭头颜色与分组标题一致 */
  font-size: 12px;
  margin-right: 8px; /* 增加与文字的间距 */
  transition: transform 0.2s;
}
.sidebar .arrow.expanded {
  transform: rotate(90deg);
}
.content {
  flex: 1;
  padding: 20px; /* 稍微调整内边距以匹配图片 */
  background: #fff; /* 内容区背景色改为白色以匹配图片 */
  /* min-height: 100vh; */ /* Removed as container handles min-height */
}

/* 确保表格内的图标和文字垂直对齐 */
.el-table .el-icon {
  vertical-align: middle;
  margin-right: 4px;
}

/* 可以为筛选栏添加一些特定样式，如果需要的话 */
/* .filter-bar .el-select,
.filter-bar .el-input {
  margin-right: 10px; 
  margin-bottom: 10px; 
} */
/* 为指标选择表格的单选按钮调整样式，使其更紧凑 */
.el-dialog .el-table .el-radio {
  margin-right: 0;
}
.el-dialog .el-table td.el-table__cell div {
    /* display: flex;
    align-items: center; */
}
.el-dialog .el-form-item__content .el-input-number {
  width: 100px; /* 统一阈值输入框宽度 */
}
</style>

data() {
  return {
    currentMenu: 'alarmList',
    activeTab: 'realtime',
    filters: {
      level: '',
      type: '',
      status: 'unclear',
      id: '',
      name: '',
    },
    thresholdActiveTab: 'default',
    customRuleFilters: {
      deviceName: '',
      esn: '',
      deviceType: '',
      collectionTime: [],
      downloadStatus: '',
      failureReason: '',
      pageNum: 1,
      pageSize: 10,
    },
    customRulesData: [
      { id: 'rule1', name: '自定义规则A', metricItem: 'CPU占用率(%)', objectType: '主机', threshold: '>95', level: '紧急' },
      { id: 'rule2', name: '自定义规则B', metricItem: '内存占用率(%)', objectType: '集群', threshold: '>90', level: '重要' },
      { id: 'rule3', name: '自定义规则C', metricItem: '磁盘IOPS', objectType: '主机', threshold: '>10000', level: '紧急' },
      { id: 'rule4', name: '自定义规则D', metricItem: '磁盘吞吐量', objectType: '集群', threshold: '>500', level: '重要' },
      { id: 'rule5', name: '自定义规则E', metricItem: '网络流入速率', objectType: '主机', threshold: '>1000', level: '提示' },
      { id: 'rule6', name: '自定义规则F', metricItem: '网络流出速率', objectType: '存储池', threshold: '>800', level: '次要' },
      { id: 'rule7', name: '自定义规则G', metricItem: 'CPU占用率(%)', objectType: '站点', threshold: '>85', level: '重要' },
      { id: 'rule8', name: '自定义规则H', metricItem: '内存占用率(%)', objectType: '主机', threshold: '>88', level: '次要' },
    ],
    selectedCustomRules: [],
    customRulesTotal: 2,
    addRuleDialogVisible: false, // 新增：控制添加规则对话框的显示
    newRuleForm: { // 新增：新规则的表单数据
      name: '',
      objectType: '主机', // 默认值同图片
      selectedMetricId: null,
      metricName: '', // 用于在表格中显示
      thresholds: {
        critical: { enabled: false, value: null },
        major: { enabled: true, value: 90 }, // 对应图片中的 "重要告警"
        minor: { enabled: true, value: 80 }, // 对应图片中的 "次要告警"
        warning: { enabled: false, value: null },
      },
      clearDelay: 5, // 默认值同图片
      description: '',
    },
    availableMetrics: [ // 新增：可选的指标列表（示例）
      { name: '内存占用率', id: '15.1000033' },
      { name: 'CPU占用率', id: '15.1000032' },
      { name: '网络流出速率', id: '15.1000034' },
      { name: '网络流入速率', id: '15.1000024' },
      { name: '磁盘IOPS', id: '15.1000035' },
      { name: '磁盘吞吐量', id: '15.1000036' },
    ],
    alarmThresholdData: [
      {
        groupName: '集群',
        isExpanded: true,
        items: [
          { metric: '网络流入速率', alarmId: '15.1000028', critical: '未启用', major: '>80%', minor: '>70%', delay: '5%' },
          { metric: '网络流出速率', alarmId: '15.1000027', critical: '未启用', major: '>80%', minor: '>70%', delay: '5%' },
          { metric: '内存占用率', alarmId: '15.1000026', critical: '未启用', major: '>80%', minor: '>70%', delay: '5%' },
          { metric: 'CPU占用率', alarmId: '15.1000025', critical: '未启用', major: '>80%', minor: '>70%', delay: '5%' },
        ]
      },
      {
        groupName: '主机',
        isExpanded: true,
        items: [
          { metric: '内存占用率', alarmId: '15.1000033', critical: '未启用', major: '>90%', minor: '>80%', delay: '5%' },
          { metric: 'CPU占用率', alarmId: '15.1000032', critical: '未启用', major: '>90%', minor: '>80%', delay: '5%' },
          { metric: '网络流出速率', alarmId: '15.1000034', critical: '未启用', major: '>90%', minor: '>80%', delay: '5%' },
          { metric: '网络流入速率', alarmId: '15.1000024', critical: '未启用', major: '>90%', minor: '>80%', delay: '5%' },
          { metric: '内存预留率', alarmId: '15.1000020', critical: '未启用', major: '>95%', minor: '未启用', delay: '5%' },
          { metric: 'Swap分区占用率', alarmId: '15.1003892', critical: '未启用', major: '>90%', minor: '未启用', delay: '5%' },
          { metric: '主机CPU复用率', alarmId: '15.1003891', critical: '未启用', major: '>300%', minor: '未启用', delay: '5%' },
          { metric: '主机内存复用率', alarmId: '15.1003888', critical: '未启用', major: '>120%', minor: '未启用', delay: '5%' },
          { metric: '主机网卡流入速率', alarmId: '15.1006032', critical: '未启用', major: '未启用', minor: '未启用', delay: '5%' },
          { metric: '主机网卡流出速率', alarmId: '15.1006031', critical: '未启用', major: '未启用', minor: '未启用', delay: '5%' },
          { metric: '数据存储I/O响应时延', alarmId: '15.1005007', critical: '未启用', major: '>50ms', minor: '3ms', delay: '5%' },
          { metric: '主机虚拟化内存占用率', alarmId: '15.1008008', critical: '未启用', major: '>90%', minor: '>80%', delay: '5%' },
        ]
      }
    ],
    openMenus: {
      monitor: true,
      // alarm: true, // 'alarm' key seems to be a typo for 'monitor' or not used for openMenus logic
    },
    menuList: [
      { key: 'alarmList', label: '告警列表' },
      { key: 'alarmValue', label: '告警阈值' },
      { key: 'alarmBoard', label: '告警屏蔽' },
      { key: 'alarmStat', label: '告警统计' },
      { key: 'alarmDump', label: '告警转储' },
      { key: 'alarmSub', label: '告警订阅' },
    ],
    alarmListData: [ // 新增告警列表的示例数据
      {
        id: '15.1001005',
        level: '紧急',
        name: '未激活license',
        object: 'site-license',
        objectType: '站点',
        generateTime: '2025-03-21 05:25:11',
        clearTime: null,
        clearType: null,
      },
      {
        id: '15.1007019',
        level: '重要',
        name: 'VRM未配置NTP对时源',
        object: 'VRM01',
        objectType: 'VRM节点',
        generateTime: '2025-03-21 05:25:02',
        clearTime: null,
        clearType: null,
      },
      {
        id: '15.1007033',
        level: '重要',
        name: '系统侧默认证书',
        object: 'site',
        objectType: '站点',
        generateTime: '2025-03-21 05:24:01',
        clearTime: null,
        clearType: null,
      },
      {
        id: '16.2003001',
        level: '提示',
        name: '存储池空间不足',
        object: 'StoragePool01',
        objectType: '存储池',
        generateTime: '2025-03-22 10:15:30',
        clearTime: '2025-03-22 11:00:00',
        clearType: '自动',
      },
      {
        id: '17.1001002',
        level: '紧急',
        name: '控制器离线',
        object: 'ControllerA',
        objectType: '控制器',
        generateTime: '2025-03-22 14:05:00',
        clearTime: null,
        clearType: null,
      },
      {
        id: '18.3005007',
        level: '重要',
        name: 'BBU模块故障',
        object: 'BBU-01',
        objectType: 'BBU模块',
        generateTime: '2025-03-23 09:30:15',
        clearTime: null,
        clearType: null,
      },
      {
        id: '19.4001003',
        level: '提示',
        name: 'LUN响应时间过长',
        object: 'LUN-Data05',
        objectType: 'LUN',
        generateTime: '2025-03-23 11:20:00',
        clearTime: '2025-03-23 11:25:00',
        clearType: '自动',
      },
      {
        id: '20.1002008',
        level: '紧急',
        name: '电源模块故障',
        object: 'PSU-2',
        objectType: '电源',
        generateTime: '2025-03-24 01:55:43',
        clearTime: null,
        clearType: null,
      },
      {
        id: '21.5001001',
        level: '重要',
        name: '网络端口连接丢失',
        object: 'Eth0/1/2',
        objectType: '网络端口',
        generateTime: '2025-03-24 15:00:05',
        clearTime: null,
        clearType: null,
      },
      {
        id: '22.6001009',
        level: '提示',
        name: 'CPU使用率过高',
        object: 'Host-Server03',
        objectType: '主机',
        generateTime: '2025-03-25 10:00:00',
        clearTime: '2025-03-25 10:10:00',
        clearType: '自动',
      }
    ],
  };
},
methods: {
  selectMenu(key) {
    this.currentMenu = key;
    if (key === 'alarmValue') {
      // this.alarmThresholdData.forEach(group => group.isExpanded = true); // 保持之前的逻辑或按需调整
    }
  },
  toggleMenu(menu) {
    this.openMenus[menu] = !this.openMenus[menu];
  },
  refreshData() {
    console.log('Refreshing data with filters:', this.filters);
  },
  toggleThresholdGroup(group) {
    group.isExpanded = !group.isExpanded;
  },
  searchCustomRules() { // 新增：查询自定义规则的方法（示例）
    console.log('Searching custom rules with filters:', this.customRuleFilters);
    // 在这里添加实际的查询逻辑
  },
  resetCustomRuleFilters() { // 新增：重置自定义规则筛选条件的方法
    this.customRuleFilters = {
      deviceName: '',
      esn: '',
      deviceType: '',
      collectionTime: [],
      downloadStatus: '',
      failureReason: '',
    };
    console.log('Custom rule filters reset');
  },
  addCustomRule() { // 新增：添加自定义规则的方法（示例）
    console.log('Add new custom rule');
    // 在这里添加打开新增规则对话框或页面的逻辑
  },
  handleAddCustomRuleRow() { // 新增：处理表格上方的“添加”按钮点击
    console.log('Adding a new row to custom rules table (inline or simple dialog)');
    // 这里可以实现添加新规则行的逻辑，例如弹出一个简单的行内编辑或对话框
    // 为了演示，我们添加一条空规则
    this.customRulesData.push({ id: `new_rule_${Date.now()}`, name: '', metricItem: '', objectType: '', threshold: '', level: '' });
    this.customRulesTotal = this.customRulesData.length;
  },
  handleDeleteSelectedCustomRules() { // 新增：处理表格上方的“删除”按钮点击
    if (this.selectedCustomRules.length === 0) {
      this.$message.warning('请至少选择一条规则进行删除');
      return;
    }
    this.$confirm(`确定删除选中的 ${this.selectedCustomRules.length} 条规则吗?`, '提示', {
      confirmButtonText: '确定',
